<template>
    <div class="app-container">
      选手荣誉列表
      <el-card class="operate-container" shadow="never">
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item label="选手名">
            <el-input v-model="searchObj.playerName" placeholder="荣誉名称"></el-input>
          </el-form-item>
          <el-form-item label="荣誉名">
            <el-input v-model="searchObj.honorName" placeholder="荣誉名称"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="medium" @click="fetchData">查询</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="default" @click="resetData">清空</el-button>
          </el-form-item>
        </el-form>
      </el-card>
      <!-- 工具按钮 -->
      <el-card class="operate-container" shadow="never">
        <i class="el-icon-tickets" style="margin-top: 5px"></i>
        <span style="margin-top: 5px">数据列表</span>
        <el-button class="btn-add" @click="addPlayerHonor()" style="margin-left: 10px;">添加</el-button>
      </el-card>
  
  
      <div style="margin-left:1%;margin-right:1%">        
	    <el-row>         
            <el-col :span="4" v-for="(item) in list" :key="item.playerId" :offset="1" style="height: 280px;width: 210px;">                
                <div style="margin-top:15px,">                    
                    <el-card :body-style="{ padding: '0px'}" shadow="hover">                       
                    <img v-if="item.picture" :src="item.picture" class="avatar">               
                    <div> 
                        <div class="bottom clearfix">                    
                            <strong>操作:</strong>
                            <el-button type="text" class="button" @click="addAppointPlayerHonor(item)">添加</el-button>
                            <el-button type="text" class="button" @click="getPlayerHonor(item)">查看</el-button>                             
                        </div>                
                    </div>        
                    </el-card>                
                </div>            
            </el-col>        
		</el-row>   
    
    <el-dialog title="添加" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="选手" :label-width="formLabelWidth">
          <el-select v-model="form.playerId" clearable placeholder="请选择">
            <el-option
              v-for="item in playerList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="荣誉" :label-width="formLabelWidth">
          <el-select v-model="form.honorId" clearable placeholder="请选择">
            <el-option
              v-for="item in honorList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="savePlayerHonor()">确 定</el-button>
      </div>
    </el-dialog>
	  <div style="margin-left:35%">
        <el-drawer
        :title="playerHonor.playerName"
        :visible.sync="drawer"
        :direction="direction"
        :before-close="handleClose">
        <img v-if="playerHonor.picture" :src="playerHonor.picture" class="avatar" style="margin-left: 20px;">
        <el-row>            
            <el-col :span="24" v-for="(item,index) in playerHonor.honorIdList" :key="playerHonor.playerId" :offset="1" >                
                <div style="margin-top:15px">                                                     
                    <div> 
                        <div class="bottom clearfix">   
                                <el-select  v-model="playerHonor.honorIdList[index]" clearable placeholder="请选择">
                                <el-option
                                    v-for="item in honorList"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id">
                                </el-option>
                                </el-select>              
                            <!-- {{ item }}                                     -->
                        </div>                
                    </div>

                </div>   
                
            </el-col>        
		</el-row>
        <el-button type="primary" @click="updatePlayerHonor(playerHonor)" style="margin-left: 20px;margin-top: 20px;">保存</el-button>                             
        </el-drawer>

        
      <!-- 分页组件 -->
      <el-pagination :current-page="pageNum" :total="total" :page-size="pageSize"
        :page-sizes="[5, 10, 20, 30, 40, 50, 100]" style="padding: 30px 0; text-align: center;"
        layout="total,sizes,prev, pager, next, jumper" @size-change="changePageSize" @current-change="changeCurrentPage">
      </el-pagination>
    </div>
    </div>
    </div>
    
  </template>

<script>

import honorApi from "@/api/honor/honor";
import playerApi from "@/api/player/player";
export default {
    data() {
        return {
            playerList: [],
            formLabelWidth: '100px',
            dialogFormVisible: false,
            playerHonor: {},
            drawer: false,
            direction: 'rtl',
            list: [], //列表
            total: 0, //总记录数
            pageNum: 1, //页码
            pageSize: 10, //每页记录数
            searchObj: {}, //查询条件
            honorList: [],
            multipleSelection: [], //批量删除选中的记录列表
            options: [{
              value: 0,
              label: '国际级'
            }, {
              value: 1,
              label: '国家级'
            }],
            form:{
              playerId: '',
              honorId: '',
            },
        }
    },
    //页面渲染之前
    created() {
        this.fetchData()
        honorApi.getPlayerHonorList()
        .then((response) => {
            this.honorList = response.data
        })
        playerApi.selectPlayerAll()
        .then((response) => {
            this.playerList = response.data
        })
    },
    methods: {
        addPlayerHonor(){
            this.form.playerId = ''
            this.form.honorId = ''
            this.dialogFormVisible = true
        },
        addAppointPlayerHonor(player){
            this.form.playerId = player.playerId
            this.dialogFormVisible = true
        },
        savePlayerHonor(){
          honorApi.insertPlayerHonor(this.form)
          .then((response) =>{
            this.$message({
                  type: 'success',
                  message: '添加成功!'
              });
              this.dialogFormVisible = false
              //跳转列表页面
              this.fetchData()
              this.$router.push({path:'/honor/playerHonor'})
          })
        },
        updatePlayerHonor(player){
            honorApi.updatePlayerHonor(player)
            .then((response) =>{
              this.$message({
                  type: 'success',
                  message: '修改成功!'
              });
              this.drawer = false
              //跳转列表页面
              this.fetchData()
              this.$router.push({path:'/honor/playerHonor'})
            })
        },
        getPlayerHonor(playerHonor){
            this.playerHonor = playerHonor;
            honorApi.getHonorByPlayer(playerHonor.playerId)
            .then((response) =>{
                this.playerHonor.honorIdList = response.data
            })
            this.drawer = true
        },
        //批量删除
    batchRemove(){
      //判断非空
      if(this.multipleSelection.length===0){
        this.$message.warning('请选择要删除的记录！')
        return
      }
      this.$confirm('此操作将永久删除该信息, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          var idList =[]
          //遍历数组
          this.multipleSelection.forEach(item => {
            idList.push(item.id)
          })
          honorApi.batchRemove(idList)
          .then((response) => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            //刷新
            this.fetchData()
          })
        });

    },
    handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
    //复选框发生变化
    handleSelectionChange(selection){
      this.multipleSelection = selection
      console.log(this.multipleSelection)
    },
    //跳转到添加表单页面
    add(){
      this.$router.push({path:'/honor/honorCreate'})
    },

    fetchData() {
      honorApi
        .getPlayerHonorPage(this.pageNum, this.pageSize, this.searchObj)
        .then((response) => {
          this.list = response.data.records;
          this.total = response.data.total;
        });
    },
    //改变每页显示记录数
    changePageSize(size) {
      this.pageSize = size;
      this.fetchData();
    },
    //改变页码数
    changeCurrentPage(page) {
      this.pageNum = page;
      this.fetchData();
    },

    resetData() {
      this.searchObj = {}
      this.fetchData()
    },
    //删除单条信息
    removeById(id){
      this.$confirm('此操作将永久删除该条信息, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          honorApi.removeHonorId(id)
          .then((response) => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            //刷新
            this.fetchData()
          })
        });
    }
    },
}
</script>